<template>
  <el-header style="width: 99%; margin: 1%; background-color: rgb(255, 255, 255)">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="/">
        <img style="width: 50px; height: 50px" alt="logo" src="@/assets/favicon.png" />
        <div>
          <h3 style="height: 5px">名正想</h3>
          <p style="margin-top: 15%">碳核算与碳交易网</p>
        </div>
      </el-menu-item>
      <div class="flex-grow"></div>
      <template v-if="disabledCount">
        <el-menu-item index="/count">
          <el-icon>
            <CircleCheck />
          </el-icon>
          <h2>碳核算</h2>
        </el-menu-item>
      </template>
      <template v-if="disabledTrade">
        <el-menu-item index="/trade">
          <el-icon>
            <ShoppingCart />
          </el-icon>
          <h2>碳交易</h2>
        </el-menu-item>
      </template>
      <template v-if="disabledMessage">
        <el-menu-item index="/user/publicmsg">
          <el-badge :value="massageNum" class="item">
            <el-icon>
              <Message />
            </el-icon>
          </el-badge>
        </el-menu-item>
      </template>
      <el-menu-item index="/user">
        <el-dropdown @command="handleCommand">
          <el-space>
            <el-icon>
              <User />
            </el-icon>
            <h2 style="padding-right: 10px">{{ userStore.getUserAccount }}</h2>
          </el-space>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="index">个人主页</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
  </el-header>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { CircleCheck, Message, ShoppingCart, User } from '@element-plus/icons-vue'
import { UserControllerService } from '../../../generated'

const userStore = useUserStore()
const activeIndex = ref('1')
const props = defineProps({
  disabledCount: {
    type: Boolean,
    default: true
  },
  disabledTrade: {
    type: Boolean,
    default: true
  },
  disabledMessage: {
    type: Boolean,
    default: true
  }
})
const user = useUserStore()
const massageNum = ref(0)
const router = useRouter()
const handleSelect = (key: string) => {
  router.push({ path: key })
  console.log(key)
}
watchEffect(() => {
  massageNum.value = userStore.getNoRead
})
/**
 * 退出登录
 */
const logout = async () => {
  //1.删除user
  user.clearUser()
  //2.删除hasLogin，删除user
  localStorage.removeItem('hasLogin')
  localStorage.removeItem('user')
  //3.退出
  await UserControllerService.userLogoutUsingPost()
  //4.跳转
  router.push({
    path: '/login'
  })
}
router.afterEach((to, from) => {
  activeIndex.value = to.path
})
const handleCommand = (command: string | number | object) => {
  console.log(command)
  if (command === 'index') {
    router.push({
      path: '/user'
    })
  } else {
    logout()
  }
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
